<template>
  <view>
    <u-popup v-model="leftShow" mode="left" @close="close">
      <view style="width: 80vw">
        <view
          class="screen"
          style="
            height: 100vh;
            background-color: #ffffff;
            border-radius: 20rpx;
            overflow: hidden;
          "
        >
          <view class="sideBg">
            <image
              :src="getImgSrc('/home/bg2@2x.png')"
              style="width: 100%"
              mode="widthFix"
            ></image>
          </view>
          <view class="sideContent">
            <view class="sideContent_avatar">
              <image
                class="avatar_img"
                v-if="vuex_user.head"
                :src="vuex_user.head"
              ></image>
              <image
                class="avatar_img"
                v-else
                src="../../../static/aidex/images/head.png"
              >
              </image>
              <view class="avatar_mes">
                <view class="avatar_mes_text1" v-if="vuex_token">
                  <text class="avatar_mes_text1_txt1">{{
                    vuex_user.nickName ? vuex_user.nickName : ""
                  }}</text>
                  <text class="avatar_mes_text1_txt2">{{
                    vuex_user.mobile
                  }}</text>
                </view>
                <view class="avatar_mes_text1" v-else>
                  <text class="avatar_mes_text1_txt1" @tap="goLogin"
                    >点击登录</text
                  >
                </view>
                <view class="avatar_mes_text2">
                  <template v-if="switchRunningMan">
                    <image
                      :src="getImgSrc('/home/icon_exchange2@2x.png')"
                      style="height: 25rpx; margin-right: 10rpx"
                      mode="heightFix"
                    ></image>
                    <text @tap="switchRunner">切换为赏金猎人</text>
                  </template>
                  <template v-else>
                    <image
                      :src="getImgSrc('/home/icon_exchange2@2x.png')"
                      style="height: 25rpx; margin-right: 10rpx"
                      mode="heightFix"
                    ></image>
                    <text @tap="jumpToId">认证赏金猎人</text>
                  </template>
                </view>
              </view>
              <image
                @tap="triggerToJump('/pages/sys/user/info')"
                :src="getImgSrc('/home/icon_right.png')"
                style="height: 30rpx"
                mode="heightFix"
              ></image>
            </view>
            <view class="sideContent_coupon">
              <!-- <view
              v-if="currentIsRunningMan"
              class="sideContent_coupon_mes"
              @tap="triggerToJump('/pages/sys/user/wallet')"
              :style="{
                'background-image': `url(${getImgSrc('/hall/_bg@2x.png')})`,
              }"
            >
              <view class="sideContent_coupon_mes_text1"> {{ wallet }} </view>
              <view class="sideContent_coupon_mes_text2"> 账户余额（元） </view>
            </view> -->
              <view
                class="sideContent_coupon_mes"
                @tap="triggerToJump('/pages/sys/user/coupon')"
                :style="{
                  'background-image': `url(${getImgSrc('/hall/_bg2@2x.png')})`,
                }"
              >
                <view class="sideContent_coupon_mes_text1">
                  {{ couponCount }}
                </view>
                <view class="sideContent_coupon_mes_text2"> 优惠券（张） </view>
              </view>
            </view>
            <view class="sideContent_order">
              <view class="sideContent_order_title list-call">
                <view class="sideContent_order_title_txt1">我的订单</view>
                <view
                  class="sideContent_order_title_txt2"
                  @tap="gotoOrderList()"
                >
                  <text
                    style="
                      color: #b5b5b5;
                      font-weight: 100;
                      font-size: 28rpx;
                      margin-right: 12rpx;
                    "
                    >全部</text
                  >
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="height: 25rpx"
                    mode="heightFix"
                  >
                  </image>
                </view>
              </view>
              <view class="sideContent_order_list mg-t-30">
                <view class="sideContent_order_item" @tap="gotoOrderList(1)">
                  <image
                    :src="getImgSrc('/home/my_icon_pay@2x.png')"
                    style="height: 56rpx; width: 56rpx"
                    mode="widthFix"
                  ></image>
                  <view>待付款</view>
                </view>
                <view class="sideContent_order_item" @tap="gotoOrderList(2)">
                  <image
                    :src="getImgSrc('/home/icon_my_wait@2x.png')"
                    style="height: 56rpx; width: 56rpx"
                    mode="widthFix"
                  ></image>
                  <view>待接单</view>
                </view>
                <view class="sideContent_order_item" @tap="gotoOrderList(3)">
                  <image
                    :src="getImgSrc('/home/icon_my_process@2x.png')"
                    style="height: 56rpx; width: 56rpx"
                    mode="widthFix"
                  ></image>
                  <view>进行中</view>
                </view>
                <view class="sideContent_order_item" @tap="gotoOrderList(4)">
                  <image
                    :src="getImgSrc('/home/icon_my_evaluate@2x.png')"
                    style="height: 56rpx; width: 56rpx"
                    mode="widthFix"
                  ></image>
                  <view>待评价</view>
                </view>
              </view>
              <view
                style="
                  width: 100%;
                  border-bottom: 1rpx #999999 dashed;
                  margin: 50rpx 0 25rpx;
                "
              ></view>
              <view class="sideContent_tab_list">
                <view
                  class="sideContent_tab_item list-call"
                  @tap="triggerToCall(phone)"
                >
                  <image
                    :src="getImgSrc('/home/icon_my_consult@2x.png')"
                    style="height: 40rpx; width: 40rpx"
                    mode="widthFix"
                  ></image>
                  <view class="place_text">客服</view>
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="height: 30rpx"
                    mode="heightFix"
                  >
                  </image>
                </view>
                <view
                  class="sideContent_tab_item list-call"
                  @tap="triggerToJump('/pages/sys/user/message')"
                >
                  <image
                    :src="getImgSrc('/home/icon_news@2x.png')"
                    style="height: 40rpx; width: 40rpx"
                    mode="widthFix"
                  ></image>
                  <view class="place_text"> 消息中心 </view>
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="height: 30rpx"
                    mode="heightFix"
                  >
                  </image>
                </view>
                <view
                  class="sideContent_tab_item list-call"
                  @tap="triggerToOpenProxyLogin"
                >
                  <image
                    :src="getImgSrc('/home/icon_my_set@2x.png')"
                    style="height: 40rpx; width: 40rpx"
                    mode="widthFix"
                  ></image>
                  <view class="place_text"> 招商合作 </view>
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="height: 30rpx"
                    mode="heightFix"
                  >
                  </image>
                </view>
                <view
                  class="sideContent_tab_item list-call"
                  @tap="triggerToJump('/pages/sys/user/setting')"
                >
                  <image
                    :src="getImgSrc('/home/icon_my_set@2x.png')"
                    style="height: 40rpx; width: 40rpx"
                    mode="widthFix"
                  ></image>
                  <view class="place_text"> 设置 </view>
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="height: 30rpx"
                    mode="heightFix"
                  >
                  </image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <u-modal
      v-model="confirmModal"
      :show-title="false"
      :show-confirm-button="false"
      :show-cancel-button="false"
    >
      <view class="slot-content">
        <view class="task-modal">
          <image
            class="task-modal-icon"
            :src="getImgSrc('/hall/icon_close@2x.png')"
            @tap="confirmModal = false"
          />
          <view class="task-modal-head">招商合作</view>
          <view class="task-modal-body">
            <view class="task-modal-desc concat"
              >申请将在24小时内受理，请注意接听来电</view
            >
            <u-form
              :model="form"
              ref="uForm"
              :rules="rules"
              label-width="180"
              label-align="right"
            >
              <u-form-item label="姓名"
                ><u-input v-model="form.name" placeholder="请输入姓名"
              /></u-form-item>
              <u-form-item label="手机"
                ><u-input
                  v-model="form.tel"
                  prop="tel"
                  placeholder="请输入手机号"
              /></u-form-item>
              <u-form-item label-position="left" label="验证码" prop="code">
                <u-input
                  placeholder="请输入验证码"
                  v-model="form.code"
                  type="text"
                ></u-input>
                <u-button
                  slot="right"
                  type="success"
                  size="mini"
                  @click="getCode"
                  >{{ codeTips }}</u-button
                >
              </u-form-item>
              <u-form-item label="申请代理城市"
                ><u-input v-model="form.city" placeholder="请输入代理城市"
              /></u-form-item>
              <u-form-item label="申请代理区县"
                ><u-input v-model="form.qx" placeholder="请输入代理区县"
              /></u-form-item>
              <u-form-item label="申请代理区域"
                ><u-input v-model="form.qy" placeholder="请输入街道详情"
              /></u-form-item>
              <u-form-item label="代理区域名称"
                ><u-input v-model="form.ktqy" placeholder="举例 浙江大学(玉泉校区)/金茂府"
              /></u-form-item>
            </u-form>
            <button class="task-use" @tap="triggerToService">提交</button>
          </view>
        </view>
      </view>
    </u-modal>
    <u-verification-code
      seconds="60"
      ref="uCode"
      @change="codeChange"
    ></u-verification-code>
  </view>
</template>
<script>
import { login, checkLogin, checkTel } from "@/common/util.js";
import { call } from "@/common/location.js";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      leftShow: false,
      wallet: 0,
      form: {
        name: "",
        tel: "",
        code: "",
        city: "",
        qx: "",
        qy: "",
        ktqy: "",
      },
      codeTips: "",
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "姓名长度在3到5个字符",
            trigger: ["change", "blur"],
          },
        ],
        tel: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur"],
          },
          {
            validator: (rule, value, callback) => {
              // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
              return this.$u.test.mobile(value);
            },
            message: "请输入正确的手机号",
            trigger: ["change", "blur"],
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: ["change", "blur"],
          },
          {
            type: "number",
            message: "验证码只能为数字",
            trigger: ["change", "blur"],
          },
        ],
      },
      confirmModal: false,
      switchRunningMan: false,
    };
  },
  mounted() {},
  watch: {
    show(val) {
      if (val) {
        this.leftShow = true;
      } else {
        this.leftShow = false;
      }
    },
  },
  created() {
    this.initData();
    this.handleCurrent();
  },
  computed: {
    couponCount() {
      return this.vuex_user.couponCount || 0;
    },
    phone() {
      return this.vuex_client.appletCode || "";
    },
  },
  methods: {
	
    // 获取验证码
    getCode() {
      const { tel } = this.form;
      if (!tel || !checkTel(tel)) {
        this.$u.toast("请输入有效手机号");
        return;
      }
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
          mask: true,
        });
        this.$u.api.invokeProxyLoginCode({ tel }).then(
          (res) => {
            uni.hideLoading();
            this.$u.toast("验证码已发送");
            this.$refs.uCode.start();
          },
          (err) => {
            this.$u.toast(err || "验证码发送失败");
          }
        );
      } else {
        this.$u.toast("倒计时结束后再发送");
      }
    },
    codeChange(text) {
      this.codeTips = text;
    },
    async triggerToService() {
      for(const key in this.form) {
        if(!this.form[key]) {
          this.$u.toast('请填写完整')
          return
        }
      }
      const res = await this.$u.api.invokeProxyLogin(this.form)
      if(res.code === 200) {
        this.$u.toast("您的申请将在24小时内受理，请注意接听来电");
        this.confirmModal = false;
      } else {
        this.$u.toast(res.message || '提交失败请重试');
      }
    },
    jumpToId() {
      if (
        checkLogin(true, () => {
          this.show = false;
        })
      ) {
        this.redirect("/pages/sys/auth/identity");
      }
    },
    switchRunner() {
      if (
        checkLogin(true, () => {
          this.show = false;
        })
      ) {
        this.$u.vuex("vuex_flag", "runner");
        this.redirect("/pages/sys/home/hall");
      }
    },
    async initData() {
      // 获取优惠券
      this.$u.api.getUserMes().then((res) => {
        if (res.code == 200) {
          this.$u.vuex("vuex_user", res.data);
        }
      });
    },
    triggerToOpenProxyLogin() {
      this.confirmModal = true;
      setTimeout(() => {
        this.$refs.uForm.setRules(this.rules);
      }, 300);
    },
    async handleCurrent() {
      const pages = getCurrentPages();
      const page = pages[pages.length - 1];
      const hasPermission = await this.queryHasRunningPermission();

      if (hasPermission) {
        this.switchRunningMan = true;
      } else {
        this.switchRunningMan = false;
        if (page.route.startsWith("/pages/sys/home/hall")) {
          uni.showToast({
            title: "没有跑腿员权限",
            duration: 1000,
            icon: "none",
          });
        }
      }
    },
    async queryHasRunningPermission() {
      const data = await this.$u.api.queryRealNameProcess();
      return data.data && data.data.type === 5;
    },
    goLogin() {
      this.leftShow = false;
      login();
    },
    gotoOrderList(e) {
      if (
        checkLogin(true, () => {
          this.leftShow = false;
        })
      ) {
        let text = "/pages/sys/cuser/orderList";
        if (e) {
          text += "?index=" + e;
        }
        uni.navigateTo({
          url: text,
        });
      }
    },
    close() {
      this.leftShow = false;
      this.$emit("close", false);
    },
    reLaunch(url) {
      uni.reLaunch({
        url: url,
      });
    },
    redirect(url) {
      uni.redirectTo({
        url: url,
      });
    },
    triggerToJump(url) {
      uni.navigateTo({
        url: url,
      });
      this.close();
    },
    triggerToCall(phone) {
      call(phone);
    },
  },
};
</script>
<style lang="scss">
.place_text a {
  text-decoration: none;
  color: #333;
}

.sideBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.sideContent {
  position: relative;
  width: 100%;
  z-index: 1;
  padding-top: 100rpx;
}

.sideContent_avatar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 40rpx;
}

.avatar_img {
  flex: 0 0 140rpx;
  width: 140rpx;
  height: 140rpx;
  border: 4rpx solid #ffffff;
  border-radius: 50%;
}

.avatar_mes {
  flex: 1;
  margin-left: 18rpx;
}

.avatar_mes_text1_txt1 {
  font-size: 30rpx;
  color: #282828;
  font-weight: 800;
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;
}

.avatar_mes_text1_txt2 {
  font-size: 26rpx;
  color: #4b4b4b;
  margin-left: 18rpx;
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;
}

.avatar_mes_text2 {
  font-size: 28rpx;
  color: #4b4b4b;
  margin-top: 30rpx;
}

.sideContent_coupon {
  display: flex;
  width: 560rpx;
  height: 150rpx;
  margin: 48rpx auto 59rpx;
}

.sideContent_coupon_mes {
  flex: 0 0 280rpx;
  background-repeat: no-repeat;
  background-size: 280rpx 150rpx;
  background-position: center;
  color: #ffffff;
  padding: 24rpx 0 0 60rpx;
}

.sideContent_coupon_mes_text1 {
  font-size: 34rpx;
  line-height: 1;
}

.sideContent_coupon_mes_text2 {
  font-size: 26rpx;
  margin-top: 14rpx;
  line-height: 1;
}

.sideContent_order_title {
  padding: 0 34rpx 0 53rpx;
  font-size: 30rpx;
  color: #282828;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sideContent_order_title_txt1 {
  line-height: 44rpx;
}

.sideContent_order_title_txt2 {
  line-height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sideContent_order_list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 24rpx;
}

.sideContent_order_item {
  text-align: center;
  font-size: 24rpx;
  color: #333333;
}

.sideContent_tab_list {
  padding: 0 40rpx;

  .sideContent_tab_item {
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    image:first-child {
      margin-right: 15rpx;
    }

    image:last-child {
      margin-left: auto;
    }
  }
}

.site_item {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #ddd;
}
.task-use {
  margin: 35rpx auto 0;
  width: 280rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #4aabf6, #4675f6);
  box-shadow: 0rpx 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
  border-radius: 40rpx;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 80rpx;
  color: #ffffff;
}
.task-modal {
  width: 600rpx;
  padding-bottom: 60rpx;
  // height: 480rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: relative;
  text-align: center;
  &-body {
    padding: 0 24rpx;
  }
  &-icon {
    position: absolute;
    height: 37rpx;
    width: 36rpx;
    right: 38rpx;
    top: 40rpx;
  }

  &-head {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #4b4b4b;
    line-height: 40rpx;
    margin-bottom: 60rpx;
    padding-top: 57rpx;
  }

  &-body {
    .concat {
      margin-bottom: 46rpx;
    }
  }

  &-desc {
    margin-top: 23rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4b4b4b;
    line-height: 40rpx;
  }

  &-area {
    text-align: left;
    padding: 22rpx 21rpx;
    box-sizing: border-box;
    width: 491rpx;
    height: 141rpx;
    background: #ffffff;
    border: 1rpx solid #d4d4d4;
    border-radius: 10px;
    margin: 0 auto;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 28rpx;
  }

  &-input {
    text-align: left;
    padding: 32rpx 25rpx;
    box-sizing: border-box;
    width: 491rpx;
    height: 91rpx;
    background: #ffffff;
    border: 1rpx solid #d4d4d4;
    border-radius: 10px;
    margin: 0 auto 29rpx;

    /deep/.uni-input-input {
      height: 28rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 28rpx;
    }
  }

  &-place {
    text-align: left;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #b5b5b5;
    line-height: 28rpx;
  }
}
</style>
